useCallback

useCallback 개요

React를 사용하다 보면, 컴포넌트가 불필요하게 다시 렌더링되는 경우를 종종 마주할 수 있습니다. 이러한 문제를 해결하기 위해 useCallback 훅을 사용할 수 있습니다. useCallback은 메모이제이션된 콜백 함수를 반환하여, 의존성 배열의 값이 변경되지 않는 한, 동일한 함수를 재사용할 수 있게 합니다. 이는 특히 자식 컴포넌트에 함수를 전달할 때 유용합니다.

useCallback 사용 예시

먼저, useCallback의 기본 사용법을 살펴보겠습니다. 아래 예제는 간단한 카운터 컴포넌트를 보여줍니다.

import React, { useState, useCallback } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

위 예제에서 increment 함수는 useCallback을 사용하여 메모이제이션되었습니다. 따라서 increment 함수는 count 상태가 변경되어도 새로 생성되지 않고 동일한 함수가 유지됩니다.

주의해야 할 점

• 의존성 배열: useCallback을 사용할 때는 의존성 배열을 신중하게 관리해야 합니다. 의존성 배열에 포함된 값이 변경될 때만 함수가 재생성되기 때문입니다.
• 필요한 경우에만 사용: 모든 함수를 useCallback으로 감싸는 것은 오히려 성능을 저하시킬 수 있습니다. 자주 재생성되는 함수나 자식 컴포넌트에 props로 전달되는 함수에만 사용하는 것이 좋습니다.

더 알아보기

• useMemo: useCallback과 유사하지만, 함수가 아닌 값을 메모이제이션할 때 사용합니다.
• React.memo: 컴포넌트의 불필요한 렌더링을 방지하기 위한 고차 컴포넌트입니다.
• 성능 최적화: React에서 성능을 최적화하는 다양한 기법들에 대해 더 알아보세요.

내용 요약

useCallback은 React 컴포넌트에서 함수를 메모이제이션하여 불필요한 렌더링을 방지하는 데 유용합니다. 특히, 자식 컴포넌트에 함수를 props로 전달할 때 유용하게 사용됩니다. 의존성 배열을 신중하게 관리해야 하며, 필요한 경우에만 사용하는 것이 좋습니다.